---
import Layout from "../layouts/Layout.astro"
import Header from "../components/cv/Header.astro"
import Footer from "../components/Footer.astro"

import { frontmatter } from "@content/about.md"

import About from "../components/content/About.astro"
import Project from "../components/content/Project.astro"
import Hackatons from "../components/content/Hackatons.astro"
import Education from "../components/content/Education.astro"
import Skills from "../components/content/Skills.astro"
import Hobbies from "../components/content/Hobbies.astro"
import Job from "../components/content/Job.astro"

import { sortProjects } from "../api/projects"
const { fullname, position } = frontmatter

const projects = sortProjects(await Astro.glob("../content/projects/*.md"))
const job = (await Astro.glob("../content/job/*.md")).sort(
    (a, b) => (b.frontmatter.index || 0) - (a.frontmatter.index || 0),
) as any[]
---

<Layout title="Резюме">
    <Fragment slot="seo">
        <meta
            name="description"
            content="Резюме Атаханова Владислава. Проекты, навыки, образование, хакатоны, интересы"
        />
    </Fragment>
    <div class="container content">
        <Header fullname={fullname} position={position} />
        <hr class="horizontal-line" />

        <About />

        <hr class="horizontal-line" />
        <main class="columns columns--two">
            <div class="columns__item columns__item--first">
                <section class="works">
                    <h2>Опыт работы</h2>
                    {job.map((job) => <Job job={job} />)}
                </section>
                <hr class="horizontal-line" />
                <section class="projects">
                    <h2>Проекты</h2>
                    {projects.map((project) => <Project project={project} />)}
                </section>
            </div>
            <div class="vertical-line"></div>
            <div class="columns__item columns__item--last meta">
                <Skills />
                <hr class="horizontal-line" />
                <Education />
                <hr class="horizontal-line" />
                <Hackatons />
                <hr class="horizontal-line" />
                <Hobbies />
            </div>
        </main>
        <hr class="horizontal-line" />
        <Footer />
    </div>
</Layout>

<style>
    :root {
        --gap: 2rem;
        --second-column-width: 15em;
        --container-margin-vertical: 3em;
        --container-margin-horizontal: 0.5em;
        --link-visited-color: #762dbf;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --link-visited-color: #c78eff;
        }
    }
    @media (width < 520px) {
        :root {
            --container-margin-vertical: 2em;
        }
    }

    @media print {
        body {
            font-size: 14px;
        }
    }

    .container {
        width: calc(100% - var(--container-margin-horizontal) * 2);
        margin: var(--container-margin-vertical) auto;
        padding: 3em;
        box-shadow: 0 0 3em 0 #0002;
        max-width: 1050px;
    }
    @media (width < 520px) {
        .container {
            padding: 2em 1em;
        }
    }

    @media print {
        .container {
            margin: 0;
            padding: 0;
            box-shadow: none;
            max-width: none;
            width: auto;
        }
    }

    .content {
        :global(section h2) {
            color: var(--accent-color);
            position: relative;
            margin: 0;
        }
        :global(section h3) {
            margin: 0;
            color: var(--title-color);
            font-size: 1em;
        }
        :global(section p) {
            margin: 3px 0;
        }
        :global(section) {
            color: var(--text-color);
            display: grid;
            gap: 1em 2em;
        }
        :global(section h2::before) {
            content: "";
            position: absolute;
            left: calc(-1 * var(--gap, 1em));
            width: 1px;
            height: 1.2em;
            top: 50%;
            transform: translate(-3px, -50%);
            border-width: 5px;
            border-right-style: solid;
            border-color: var(--accent-color);
        }
    }
    @media screen and (width < 780px) {
        .content :global(section h2::before) {
            opacity: 0;
        }
    }

    .columns {
        display: grid;
        align-items: start;
    }
    @media (width < 780px) {
        .columns .vertical-line {
            height: 1px;
            width: 100%;
            margin: var(--gap, 1em) 0;
            border-bottom-style: solid;
        }
    }
    .columns--two {
        grid-template-columns: auto auto var(--second-column-width);
        .columns__item--last {
            position: relative;
        }
    }
    .columns__item--first h2::before {
        content: none;
    }

    @media (width < 780px) {
        .columns--two {
            grid-template-columns: 1fr;
        }
    }

    .columns__item--first > * {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2em;
        --icon-size: 1.5em;
        h2::before {
            content: none !important;
        }
    }
</style>
